/**
 * Created by luojie on 2018/3/12.
 */
import "../css/modal.scss";
import close from '../images/close.png'
const titleBg = require("../images/dialog-title-bg.png");
const face = require("../images/smile-face.png");
export default class Modal extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            Show: props.isShow || false
        }
    }
    static defaultProps = {
	    isTitle:true,
    }
    componentDidMount() {
    }
    close() {
        let {onClose} = this.props;
	    onClose && onClose();
    }
    componentWillReceiveProps(nextProps) {
        let { Show } = this.state
        const { isShow } = this.props
        if (isShow !== nextProps.isShow) {
            Show = nextProps.isShow
            this.setState({
                Show
            })
        }
    }
    render() {
        const { children, hasBgImg, width, height,isTitle } = this.props
        const { Show } = this.state
        return (
            Show ? (<div className="modal">
                <div className="modal-content"
                    style={{ width: width, height :height}}
                >
                    <div className="close" onClick={this.close.bind(this)}>
                        <img src={close} />
                    </div>
                    <div className="dialog-content">
                        {
                            isTitle &&
                            <div className="relative">
                                <img className="dialog-content-title" src={titleBg} alt=""/>
                                <img className="face-img" src={face} alt=""/>
                            </div>
                        }
                        <div className="children-content">
	                        {children}
                        </div>
                    </div>
                </div>
            </div>) : null
        )
    }
}